<template>
  <div class="container">
    <Ques :tableData="tableData" @Slist="hlist" @Plist="Plist"></Ques>
    <el-card class="box-card">
      <div>数据一共{{ total }}条</div>

      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
        > </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
        > </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录"
        > </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
        >
          <template #default="{ row }">
            {{ hquestionType(row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
        >
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template #default="{ row }">
            {{ formDate(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
        >
          <template #default="{ row }">
            {{ hdifficulty(row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
        > </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="el-icon-view"
              plain
              circle
              @click="preview(row)"
              title="预览"
              class="yulan"
            ></el-button>
            <el-button
              size="small"
              type="success"
              icon="el-icon-edit"
              plain
              circle
              title="修改"
              class="xiugai"
              @click="edit(row)"
            ></el-button>
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              @click="del(row)"
              title="删除"
              class="shanchu"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-check"
              plain
              circle
              title="加入精选"
              class="add"
              @click="add(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="sizes, prev, pager, next,jumper"
        :total="total"
        @current-change="change"
        @size-change="changeSize"
        :page-size="params.pagesize"
        :page-sizes="[2, 3, 4, 5]"
      >
      </el-pagination>
    </el-card>
    <Dialog
      :showDialog="showDialog"
      @closeDialog="closeDialog"
      :object="object"
      :radio="radio"
      :checkList="checkList"
    ></Dialog>
  </div>
</template>

<script>
import Ques from '../components/ques.vue'
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
import Dialog from '../components/dialog.vue'
import dayjs from 'dayjs'

export default {
  name: 'questions',
  components: {
    Ques,
    Dialog
  },
  data () {
    return {
      tableData: [],
      total: 0,
      showDialog: false,
      object: {},
      params: {
        page: 1,
        pagesize: 3,
        keyword: ''
      },
      newparams: {
        page: 1,
        pagesize: 3,
        subjectID: null
      },
      radio: null,
      checkList: []
    }
  },
  methods: {

    formDate (value, str = 'YYYY-MM-DD') {
      return dayjs(value).format(str)
    },
    // 基础题库列表
    async hlist (val, type) {
      console.log(val, type)
      const res = await list({
        page: this.params.page,
        pagesize: this.params.pagesize,
        keyword: val
      })
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    async Plist (val) {
      console.log(val)
      const res = await list({
        page: this.params.page,
        pagesize: this.params.pagesize,
        subjectID: val
      })
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 题型
    hquestionType (type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简单'
      }
      return map[type]
    },
    // 难度
    hdifficulty (type) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[type]
    },
    // 删除
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.hlist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    changeSize (e) {
      this.params.pagesize = e
      this.hlist()
    },
    // 分页
    change (page) {
      this.params.page = page
      this.hlist()
    },
    // 预览
    async preview (row) {
      const res = await detail(row)
      console.log(res)
      this.object = res.data
      console.log(this.object)
      if (this.object.questionType === '1') {
        this.object.options.map((item) => {
          if (item.isRight === 1) {
            this.radio = item.code
          }
        })
      } else if (this.object.questionType === '2') {
        this.object.options.forEach((item) => {
          if (item.isRight === 1) {
            this.checkList.push(item.code)
          }
        })
      }

      this.showDialog = true
    },
    // 关闭弹窗
    closeDialog () {
      this.showDialog = false
    },
    // 添加到精选题库
    add (row) {
      this.$confirm('确定加入精选题库吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choiceAdd({ id: row.id, choiceState: 1 })
          this.$router.push('/questions/choice')
          this.hlist()
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          })
        })
    },
    // 修改
    async edit (row) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id
        }
      })
    }
  },
  mounted () {
    this.hlist()
  }
}
</script>

<style scoped lang='scss'>
</style>
